<style>
.CodeMirror {
    border: 1px solid #ddd;
    height: auto;
}
.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}
</style>
<template>
    <Row>
        <Row :gutter="3">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        模板库
                    </p>
                    <br>
                    <Row :gutter="3">
                        <Col span="8">&nbsp;</Col>
                        <Col span="8">
                            <Input v-model="keywords">
                                <Select v-model="key" slot="prepend" style="width: 140px">
                                    <Option v-for="(item,index) in keys" :key="index" :value="item.columnname">{{item.title}}</Option>
                                </Select>
                                <Button slot="append" icon="ios-search" @click="handleSearch(1)"></Button>
                            </Input>
                        </Col>
                        <Col span="8">&nbsp;</Col>
                    </Row>
                    <br>
                    <br>
                    <Row :gutter="3">
                        <Col span="1">&nbsp;</Col>
                        <Col span="22">
                            <Page @on-change="changePage" @on-page-size-change="changePageSize" :current="page.current" :total="page.total" :page-size="page.pagesize" :page-size-opts="page.pagesizeopts" show-total show-elevator show-sizer></Page>
                        </Col>
                        <Col span="1">&nbsp;</Col>
                    </Row>
                    <br>
                    <Row :gutter="5">
                        <Col span="1">&nbsp;</Col>
                        <Col span="22">
                            <Table stripe border highlight-row :columns="columns" :data="data" :loading="table.loading" @on-current-change="handleFormdata" @on-sort-change="changeSort"></Table>
                        </Col>
                        <Col span="1">&nbsp;</Col>
                    </Row>
                </Card>
            </Col>
        </Row>
        <br>
        <Row :gutter="3">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        编辑
                    </p>
                    <br>
                    <Row :gutter="3">
                        <Col span="24">
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                                <FormItem label="ID" prop="templateid">
                                    <Input v-model="formValidate.templateid" placeholder="ID不可编辑" disabled></Input>
                                </FormItem>
                                <FormItem label="组名" prop="groupname">
                                    <Input v-model="formValidate.groupname" placeholder="请输入模板组名称"></Input>
                                </FormItem>
                                <FormItem label="模板名称" prop="templatename">
                                    <Input v-model="formValidate.templatename" placeholder="请输入模板名称"></Input>
                                </FormItem>
                                <FormItem label="相对路径" prop="relativepath">
                                    <Input v-model="formValidate.relativepath" placeholder="请输入相对路径"></Input>
                                </FormItem>
                                <FormItem label="文件名称" prop="newfilename">
                                    <Input v-model="formValidate.newfilename" placeholder="请输入代码文件名"></Input>
                                </FormItem>
                                <FormItem label="模板代码" prop="templatecontent">
                                    <codemirror v-model="formValidate.templatecontent" :options="cmOptions" style="line-height:19px;"></codemirror>
                                </FormItem>
                                <FormItem label="备注" prop="remark">
                                    <Input v-model="formValidate.remark" placeholder="备注"></Input>
                                </FormItem>
                                <FormItem label="序号" prop="sn">
                                    <Input type="number" v-model="formValidate.sn" placeholder="请输入序号"></Input>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" @click="handleSubmit('formValidate')" :loading="save_loading">保存</Button>
                                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
    </Row>
</template>

<script>
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
require('codemirror/mode/javascript/javascript.js')
import 'codemirror/theme/idea.css'
export default {
    name: 'webpage',
    components:{
        codemirror
    },
    data () {
        return {
            serverpath:'',
            key:'',
            keys: [
              {columnname: 'templatecontent', title: '模板代码'},
              {columnname: 'groupname', title: '组名'},
              {columnname: 'templatename', title: '模板名称'},
              {columnname: 'relativepath', title: '相对路径'},
              {columnname: 'newfilename', title: '文件名'},
              {columnname: 'remark', title: '备注'},
              {columnname: 'sn', title: '序号'}
            ],
            keywords:'',
            page: {
        		    total: 0,
                current: 1,
                pagesize: 10,
                //原代码为  key: 'username', 但不符合通用规则,修改成id为key,如有需要可以改正
                key: 'sn',
                order: 'asc',
                pagesizeopts: [5, 10, 20, 30, 40, 100]
            },
            table: {
        		loading:true,
        		selection:[],
        		keywords: ''
        	},
          columns: [{
			        key: 'sn',
			        title: 'sn',
              width: 80,
              sortable: 'custom'
			    },
          {
              key: 'groupname',
              title: '组名',
              width: 180,
              sortable: 'custom'
          },
			    {
			        key: 'templatename',
			        title: '模板名称',
              width: 180,
              sortable: 'custom'
			    },
          {
              key: 'newfilename',
              title: '文件名称',
              width: 230,
              sortable: 'custom'
          },
			    {
			        key: 'relativepath',
			        title: '相对路径'
			    }
			],
            data: [],
            save_loading:false,
            formValidate: {
                templateid:''
                ,groupname: ''
                ,templatename: ''
                ,projectname: ''
                ,relativepath: ''
                ,newfilename: ''
                ,templatecontent: ''
                ,remark: ''
                ,sn: '1'
            },
            ruleValidate: {
                groupname: [
                    { required: true, message: '模板组名称不能为空', trigger: 'blur'  }
                ],
                templatename: [
                    { required: true, message: '模板名称不能为空', trigger: 'blur'  }
                ]
            },
            cmOptions: {
                height: "100%",
                tabSize: 2,
                lineNumbers: true
            }
        };
    },
    methods: {
        handleSubmit (name) {
            this.save_loading = true;
            let self = this;
            let myname = localStorage.getItem('user');
            //这里只有admin可以修改
            var loginuser = localStorage.getItem('user');
            if(loginuser!='admin' && loginuser!='qinhao'){
                    self.save_loading = false;
                    self.$Message.error('修改模板请联系管理员确认!');
                    return false;
            }
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let param = new FormData(); //创建form对象
                    param.append('templateid',self.formValidate.templateid);//模板ID
                    param.append('groupname',self.formValidate.groupname);//模板组名称
                    param.append('templatename',self.formValidate.templatename);//模板名称
                    param.append('relativepath',self.formValidate.relativepath);//相对路径
                    param.append('newfilename',self.formValidate.newfilename);//文件名称
                    param.append('templatecontent',self.formValidate.templatecontent);//模板代码
                    param.append('remark',self.formValidate.remark);//备注
                    param.append('sn',self.formValidate.sn);//序号
                    self.$axios.post(self.$util.server+'templates/save',  param, {
                        headers: {
                            "authorization": localStorage.getItem("authorization"),
                            "Content-Type":"multipart/form-data"
                        }
                    }).then(function(response) {
                        self.save_loading = false;
                        if(response.data.ok){
                            self.$Message.success('保存成功!');
                            self.handleSearch(1);
                        }else{
                            self.$Message.error('保存失败，请检查!');
                        }
                    }).catch( function(response) {
                        self.$Message.error('保存失败，请检查输入内容!');
                        console.log(response)
                    });
                } else {
                    self.save_loading = false;
                    self.$Message.error('内容验证不通过，请检查输入内容!');
                }
            })
        },
        handleFormdata (currentRow,oldCurrentRow) {
            if(currentRow){
                this.formValidate.templateid = currentRow.templateid;//ID
                this.formValidate.groupname = currentRow.groupname;//
                this.formValidate.templatename = currentRow.templatename;//
                this.formValidate.projectname = currentRow.projectname;//
                this.formValidate.relativepath = currentRow.relativepath;//
                this.formValidate.newfilename = currentRow.newfilename;//
                if(currentRow.templatecontent){
                    let templatecontent = currentRow.templatecontent.replace(/&lt;/g, "<")
                    this.formValidate.templatecontent = templatecontent.replace(/&gt;/g, ">")
                }
                this.formValidate.remark = currentRow.remark;//
                this.formValidate.sn = currentRow.sn;//
            }
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        handleSearch (topage) {
            //初始化列表
            let self = this;
            self.table.loading = true;//loading效果
            let size = this.page.pagesize;
            if(topage) this.page.current = topage;
            let page = this.page.current-1;
            console.log(page)
            let sort = this.page.key + ',' + this.page.order;
            if(this.page.order=='normal'){ sort = 'sn, asc';}
            let key = this.key;
            let keywords = this.keywords;

            this.$axios.get(self.$util.server+'templates/pagedata', {
                params:{
                  size: size,
                  page: page,
                  sort: sort,
                  key: key,
                  keywords: keywords
                },
                headers: {
                    "authorization": localStorage.getItem("authorization"),
                    "Content-Type":"application/json;charset=utf-8"
                }
            }).then(function(response) {
                self.table.loading = false;//取消loading效果
                if(response.data.total>0) {
                    self.page.total = response.data.total;
                    self.data = response.data.rows;
                }else{
                    self.page.total = 0;
                    self.data = [];
                }
            }).catch( function(response) {
                self.table.loading = false;//取消loading效果
                console.log(response)
            });
        },
        changePage(current){
        	this.page.current = current;
			    this.handleSearch();
        },
        changePageSize(size){
        	this.page.pagesize = size;
			    this.handleSearch();
        },
        changeSort(column){
	        this.page.key = column.key;
	        this.page.order = column.order;
        	this.handleSearch(1);
        },
        handleInit () {
            //初始化查询
            this.handleSearch()
        }
    },
    mounted () {
        this.handleInit();
    }

};
</script>
